<!--公共组件，其实就是实现一个复用，定义了然后在其他页面调用-->
<!--
调用方式
<Tabbar></Tabbar>
引入
import Tabbar from "../components/common/Tabbar.vue";
export default {components: {Tabbar},};
-->
<template>
  <div class="tabbar">
    <!-- 这是底部tabbar -->
    <ul>
      <li
        v-for='(item,index) in routerList'
        :key='index'
        @click='switchTab(item.path)'
      >
        <!-- 了解item.path 和route.path 注：$route.path.includes(item.path)，includes返回false和true-->
        <!-- 查询switchTab函数 -->
        <!-- img的地址要放在public里面 -->
        <img
          :src="$route.path.includes(item.path)?item.selected:item.active"
          alt='在加载中'
        >
        <span :class='$route.path.includes(item.path) ? "active" : " "'>{{item.title}}</span>
        <!-- 不熟需要留意:class的: -->
      </li>
      <!-- 下面的数据现在没有用了，用于刚开始的自定义定位 -->
      <!-- <li><img
          src="../../assets/images/home.png"
          alt="首页"
        >
        <span>首页</span>
      </li>
      <li><img
          src="../../assets/images/home.png"
          alt="首页"
        >
        <span>首页</span>
      </li>
      <li><img
          src="../../assets/images/home.png"
          alt="首页"
        >
        <span>首页</span>
      </li>
      <li><img
          src="../../assets/images/home.png"
          alt="首页"
        >
        <span>首页</span>
      </li> -->
    </ul>
  </div>
</template>

<script>
/* import HomeViewVue from "@/views/HomeView.vue"; */
/* 构建一个数据进行数据的展示 进行渲染*/
export default {
  data() {
    /* data加括号意味*/
    return {
      routerList: [
        {
          title: "首页",
          path: "/home" /* 跳转路径*/,
          /* path:'/HomeView', */
          active: "/images/home.png" /* 默认图片*/,
          selected: "/images/home-select.png" /* 选中时图片 */,
        },
        {
          title: "分类",
          path: "/list" /* 跳转路径*/,
          /* path:'/HomeView', */
          active: "/images/list.png" /* 默认图片*/,
          selected: "/images/list-select.png" /* 选中时图片 */,
          /* 关于这里为什么要去掉./或者不直接去掉/ ，保留右边的那个 还需要讨论 selected: "/images/list-select.png" /* 选中时图片 */
        },
        {
          title: "购物车",
          path: "/cart" /* 跳转路径*/,
          /* path:'/HomeView', */
          active: "/images/cart.png" /* 默认图片*/,
          selected: "/images/cart-select.png" /* 选中时图片 */,
        },
        {
          title: "我的",
          path: "/my" /* 跳转路径*/,
          /* path:'/HomeView', */
          active: "/images/my.png" /* 默认图片*/,
          selected: "/images/my-select.png" /* 选中时图片 */,
        },
      ],
    };
  },
  methods: {
    switchTab(path) {
      //需要做判断，如果this.$router就是path，那就不用做跳转*/
      /*route和router的区别？需要弄清楚 */
      /* 如果没有if判断，连点的时候会报错  判断点击的是否是同一个路由*/
      if (this.$route.path == path) {
        return;
      }
      //对应跳转页面
      this.$router.replace(path);
    },
  },
};
</script>

<style scoped>
/*在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。*/
.tabbar {
  bottom: 0; /* 在底部 */
  position: fixed; /* 在底部 */
  padding: 3px 1px 1px 3px;
  /*   left: 0;
  bottom: 0;
  z-index: 999; /* 保证优先级 时刻现实 */
  width: 100vw; /*  width: 100% */
  height: 75px; /*2rem 待会引入适配转换文件*/
  background-color: #fff;
  /*  background-color: red; */
}
.tabbar ul {
  display: flex; /*弹性布局 改变ul属性 在同一行排列 */
  /* justify-content: space-between; 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点 */
  justify-content: space-around; /* 均匀排列每个元素，每个元素周围分配相同的空间 */
}
.tabbar ul li {
  display: flex; /*弹性布局 改变ul属性 在同一行排列 */
  flex-direction: column; /*上下排列 */
  /* flex: 1; /*待弄懂*/
  align-items: center;
  /* align-items 属性为弹性容器内的项目指定默认对齐方式*/
  height: 100%;
  width: 100%;
  align-items: center;
  justify-items: center;
}
.tabbar ul img {
  width: 48px;
  height: 48px;
}
.tabbar ul span {
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  text-align: center;
  font-size: 16px;
}
.active {
  color: rgb(223, 15, 195);
}
</style>